import { PageHeader, Card, Form, Input, Row, Col } from "antd";
import { useForm } from "antd/lib/form/Form";
import { useEffect } from "react";


export function TestDetail() {
    const basicData = {
        set: {
            type: "set"
        }
    }
    return (
        <div style={{ backgroundColor: "#fff", marginLeft: 20, height: "100%" }}>
            <PageHeader
                className="site-page-header"
                title="测试设置"
                subTitle=""
            >
                <BasicForm data={basicData} />
                
            </PageHeader>
        </div>
    )
}

function BasicForm(props: { data?: any }) {
    const [form] = useForm();
    useEffect(() => {
        form.setFieldsValue(props.data);
    }, [form, props.data])
    return (
        <Card title="基本信息" bordered={false}>
            <Form
                form={form}
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 12 }}
            >
                <Form.Item
                    name="name"
                    label="名字"
                >
                    <Input></Input>
                </Form.Item>
                <Form.Item
                    label="请求路径"
                >
                    <Row>
                        <Col span={12}>
                            <Form.Item
                                name={"base"}
                                noStyle
                                style={{
                                    display: "inline-block",
                                    width: 'calc(50% - 8px)'
                                }}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name={"requestUrl"}
                                noStyle
                                style={{
                                    display: "inline-block",
                                    width: 'calc(50% - 8px)'
                                }}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form.Item>
                {/* <Form.Item
                    label="批量设置"
                >
                    <Input.Group compact>
                        <Form.Item name={["set", "type"]} noStyle>
                            <Select>
                                <Select.Option value="set">批量</Select.Option>
                                <Select.Option value="one">单元</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name={["set", "number"]}><Input placeholder="批量数" /></Form.Item>
                    </Input.Group>
                </Form.Item> */}
            </Form>
        </Card>
    )
}

